<template>
  <div class='menu top-menu' v-if="endlessKanvasScene">
    <q-img class="image-button" v-for="button of buttons" :key="button.image" :src="button.imageUri" width='48px'
      @click='button.callback' />
    <color-selector></color-selector>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { mainMenuButtons } from '../apps/main-menu/mainMenuButtons';
import { usePhaserStore } from '../stores/phaserStore';
import { mapState } from 'pinia';
import colorSelector from './colorSelector.vue';

export default defineComponent({
  name: 'topMenu',
  components: {
    colorSelector
  },
  computed: {
    ...mapState(usePhaserStore, ['endlessKanvasScene']),
    buttons(): any[] {
      return mainMenuButtons(this.endlessKanvasScene);
    },
  },
});
</script>
<style scoped>
.top-menu {
  top: 0;
  left: 0;
  width: calc(100vw - 10px);
  height: 48px;
  background-color: transparent;
  align-items: center;
  margin-top: 5px;
  margin-left: 5px;
  /* border: dotted tomato; */
}

.image-button {
  cursor: pointer;
  pointer-events: initial;
}

.menu {
  position: fixed;
  pointer-events: none;
  background-color: transparent;
  display: flex;
  z-index: 100;
}

.glow-effect {
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.9);

  /* Пример стиля "glow" */
}
</style>
